<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
	</head>
	<style>
		.l {
			position: absolute;
			top: 10px;
			left: 600px;
		}
	</style>
	<body class="container">
		<div class="row">
			<div class="col-3">
				<nav class="nav nav-pills flex-column ">
					<a href="#a" class="nav-link text-center" data-toggle="pill">北京</a>
					<a href="#b" class="nav-link text-center" data-toggle="pill">上海</a>
					<a href="#c" class="nav-link text-center" data-toggle="pill">广州</a>

				</nav>
			</div>
			<div class="col-9">
				<div class="tab-content">
					<div class="tab-pane badge-info" id="a" style="height:40px;">北京是。。。</div>
					<div class="tab-pane badge-info" id="b" style="height:40px;">上海是。。。</div>
					<div class="tab-pane badge-info" id="c" style="height:40px;">广州是。。。</div>
				</div>
			</div>

		</div>
		<br><br>
		<nav class="navbar navbar-light badge-dark navbar-expand-lg">
			<a classs="navbar-brand text-white">
				<h5>教务处</h5>
			</a>
			<button class="navbar-toggler border-light border" data-target="#colla" data-toggle="collapse">
				<span class="navbar-toggler-icon "></span>
			</button>
			<div class="collapse navbar-collapse" id="colla">
				<ul class="navbar-nav ">
					<li class="nav-item ">
						<a class="nav-link text-white active" href="#">教学组织</a>
					</li>
					<li class="nav-item ">
						<a class="nav-link text-white" href="#jigou" data-toggle="tab" disabled>通知公告</a>
					</li>
					<li class="nav-item dropdown ">
						<a class="nav-link text-white" href="#" data-toggle="dropdown">常用下载</a>
						<div class="dropdown-menu">
							<div class="dropdown-item ">学校简介</div>
							<div class="dropdown-item ">现任领导</div>
							<div class="dropdown-item ">历任领导</div>
						</div>
					</li>

					<li class="nav-item text-white">
						<a class="nav-link text-white" href="#yuanxi" data-toggle="pill" disabled>教学周历</a>
					</li>
				</ul>
				<div class="l">
					<form action="" class="form-inline ">
						<form action="" class="form-inline text-right">
							<input type="search" placeholder="用户名" class="form-control mr-sm-2">
							<input type="search" placeholder="密码" class="form-control mr-sm-2">
							<button class="btn bg-white" type="sumbit">登录</button>
						</form>
					</form>
				</div>
			</div>
		</nav>
	</body>
</html>
